রাউট গার্ড হল Angular-এর একটি বিশেষ ফিচার যা রাউটিং প্রক্রিয়ার সময় ইউজারের অ্যাক্সেস নিয়ন্ত্রণ করে। এটি নির্ধারণ করতে সাহায্য করে যে, একটি নির্দিষ্ট রাউটে নেভিগেট করার আগে ইউজারকে অনুমতি দেওয়া হবে কিনা। রাউট গার্ড মূলত নিরাপত্তা, অনুমোদন (Authorization), এবং অ্যাক্সেস কন্ট্রোলের জন্য ব্যবহৃত হয়।

Angular অ্যাপ্লিকেশনে বিভিন্ন ধরণের রাউট গার্ড রয়েছে, যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে। এগুলি বিশেষভাবে ব্যবহারকারী অনুমতি চেক করার জন্য, ইউজার লগিন বা নির্দিষ্ট শর্ত পূরণ না করলে রাউট পরিবর্তন ব্লক করার জন্য উপকারী।

রাউট গার্ডের ধরন

Angular-এ কয়েকটি ধরণের রাউট গার্ড রয়েছে, যেগুলি ব্যবহারকারীর রাউটের প্রতি অ্যাক্সেসের নিয়ন্ত্রণ করতে সহায়তা করে। এদের মধ্যে কিছু জনপ্রিয় গার্ড হলো:

1. CanActivate
2. CanActivateChild
3. CanDeactivate
4. Resolve
5. CanLoad

1. CanActivate গার্ড

CanActivate গার্ড একটি রাউটের জন্য অ্যাক্সেস চেক করতে ব্যবহৃত হয়। এটি রাউটকে অ্যাক্সেস করার আগে ইউজারের প্রমাণীকরণ (authentication) বা অনুমোদন (authorization) চেক করতে ব্যবহৃত হয়। যদি ইউজার অনুমোদিত না হয়, তাহলে রাউটটি অ্যাক্সেস করা যাবে না।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const isAuthenticated = false; // এখানে আপনি প্রকৃত অথেনটিকেশন চেক করবেন
    if (!isAuthenticated) {
      this.router.navigate(['/login']); // যদি অনুমোদিত না হয় তবে লগইন পেজে নিয়ে যাবে
      return false;
    }
    return true;
  }
}

এখন app-routing.module.ts এ এই গার্ডটি রাউটে ব্যবহার করা হবে:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
];

এই কনফিগারেশনে, AuthGuard গার্ডটি /dashboard রাউটে নেভিগেট করার আগে ইউজারের অথেনটিকেশন চেক করবে।

2. CanActivateChild গার্ড

CanActivateChild গার্ড ব্যবহার হয় যখন একটি প্যারেন্ট রাউটের অধীনে বিভিন্ন চাইল্ড রাউট রয়েছে এবং আপনি চান যে, প্যারেন্ট রাউটের এক্সেস চেক করার পর চাইল্ড রাউটগুলোও চেক করা হোক।

উদাহরণ:

const routes: Routes = [
  {
    path: 'parent', component: ParentComponent, canActivateChild: [AuthGuard],
    children: [
      { path: 'child', component: ChildComponent }
    ]
  }
];

এখানে, AuthGuard প্যারেন্ট রাউটের জন্য চেক করার পর চাইল্ড রাউটগুলোর জন্যও কার্যকর হবে।

3. CanDeactivate গার্ড

CanDeactivate গার্ড ব্যবহার হয় যখন আপনি চান যে, ইউজার একটি ফর্মে কোনো পরিবর্তন করার পর রাউট পরিবর্তন করার সময় সেগুলোর অজান্তে হারিয়ে না যায়। এটি ইউজারকে একটি সতর্কতা প্রদর্শন করে এবং তাকে রাউট পরিবর্তন থেকে বিরত রাখে যদি সে কোনো অপ্রকাশিত পরিবর্তন করে।

উদাহরণ:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { EditComponent } from './edit/edit.component';

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<EditComponent> {

  canDeactivate(component: EditComponent): Observable<boolean> | Promise<boolean> | boolean {
    if (component.form.dirty) {
      return window.confirm('You have unsaved changes, do you really want to leave?');
    }
    return true;
  }
}

এখন app-routing.module.ts এ:

const routes: Routes = [
  { path: 'edit', component: EditComponent, canDeactivate: [CanDeactivateGuard] }
];

এখানে, CanDeactivateGuard চেক করবে, যদি ফর্মে কোনো পরিবর্তন থাকে এবং ইউজার রাউট পরিবর্তন করতে চায় তবে তাকে সতর্ক করবে।

4. Resolve গার্ড

Resolve গার্ড ব্যবহার হয় রাউট লোড হওয়ার আগে ডেটা প্রিপেয়ার করতে। এটি সাধারণত সেইসব ক্ষেত্রে ব্যবহৃত হয় যখন আপনি চান যে, রাউটের জন্য কোনো ডেটা লোড হয়ে যাক তার আগে রাউটটি ব্যবহারকারীর কাছে পৌঁছাবে।

উদাহরণ:

@Injectable({
  providedIn: 'root'
})
export class DataResolver implements Resolve<any> {

  constructor(private dataService: DataService) {}

  resolve(): Observable<any> {
    return this.dataService.getData();
  }
}

এখন, রাউটে এই গার্ডটি যুক্ত করতে হবে:

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, resolve: { data: DataResolver } }
];

এখানে, DataResolver গার্ডটি রাউট লোড হওয়ার আগে DataService থেকে ডেটা লোড করবে।

5. CanLoad গার্ড

CanLoad গার্ড ব্যবহার হয় রাউট লোড হওয়ার আগে কোনো মডিউল লোড করার অনুমতি চেক করতে। এটি সাধারণত Lazy Loading মডিউলের জন্য ব্যবহৃত হয়, যাতে নির্দিষ্ট শর্ত পূর্ণ না হলে মডিউলটি লোড না হয়।

উদাহরণ:

@Injectable({
  providedIn: 'root'
})
export class CanLoadGuard implements CanLoad {

  constructor(private authService: AuthService) {}

  canLoad(): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated();
  }
}

এখন এই গার্ডটি রাউটে ব্যবহার করা হবে:

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule), canLoad: [CanLoadGuard] }
];

এখানে, CanLoadGuard গার্ডটি Lazy Loaded মডিউলটির লোড করার আগে ইউজারের অনুমোদন চেক করবে।

সারাংশ

রাউট গার্ড Angular অ্যাপ্লিকেশনে রাউটের অ্যাক্সেস কন্ট্রোলের জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি ইউজারের অথেনটিকেশন, অথোরাইজেশন এবং অন্যান্য শর্তের উপর ভিত্তি করে রাউট গন্তব্যে নেভিগেট করার অনুমতি বা অ-অনুমতি প্রদান করতে সাহায্য করে।